<template>
	<view class="wrap">
		<view class="top_box">
			<view class="user-box">
				<view class="user_bg">
					<image src="../static/imgs/m1.png" mode="widthFix"></image>
				</view>
				<view class="top-box flex_sb">
					<view class="text-d">
						<view class="name">当前余额</view>
						<view class="num">{{dataInfo.now_money||'0.00'}}</view>
					</view>
					<view class="btn_box flex_s">
						<view class="btn"  @click="$util.JumpPath('/pages/new_page/user/withdrawal')">
							提现
						</view>
						<view class="btn" v-if="recharge_switch" @click="$util.JumpPath('/pages/new_page/user/recharge')">
							充值
						</view>
					</view>
				</view>
				<!-- <view class="value-box flex_sb">
					<view class="li">
						<view class="name">累计消费</view>
						<view class="value">{{dataInfo.pay||'0.00'}}</view>
					</view>
					<view class="li">
						<view class="name">累计充值</view>
						<view class="value">{{dataInfo.recharge||'0.00'}}</view>
					</view>
					<view class="li">
						<view class="name">累计提现</view>
						<view class="value">{{dataInfo.cash_withdraw||'0.00'}}</view>
					</view>
				</view> -->
			</view>
			<view class="tab_box flex_sb">
				<view class="tab_item flex_c" :class="{active:tabCurrent==index}" v-for="(item,index) in tabList"
					:key="index" @click="changeTab(index)">
					{{item.name}}
				</view>
			</view>

		</view>
		<view class="list-box" v-if="dataList.length">
			<block v-for="(item,index) in dataList" :key="index">
				<view class="list" @click="goDetail(item)">
					<view class="title flex_sb">
						<view class="left flex_s">
							<text>{{item.title||'提现'}}</text>
							<!-- 0 = 待确定 1 = 有效 -1 = 无效 -->
							<view class="status_box">
								<text v-if="item.status==0">待审核</text>
								<text v-else-if="item.status==1">已通过</text>
								<text v-else>已驳回</text>
							</view>
						</view>
						<view class="arrow_right" v-if="!item.type.includes('system')">
							<text class="iconfont icon-xiangyou"></text>
						</view>
					</view>
					<view class="body">
						<view class="left">
							<view class="span" >
								{{item.mark||''}}
							</view>
							<view class="span">
								{{item.add_time||'创建时间'}}
							</view>
						</view>
						<view class="pirce">
							<text v-if="tabCurrent==0">+</text>
							<text v-else>-</text>
							{{item.number||0}}
						</view>
					</view>

				</view>
			</block>

		</view>
		<emptyPage v-else></emptyPage>

	</view>
</template>

<script>
	import emptyPage from "@/components/emptyPage.vue";
	import {
		balance_detail,
		income_list
	} from "@/api/new_api.js"
	import {
		getUserInfo
	} from '@/api/user.js';
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				tabCurrent: 0,
				tabList: [{
					name: '入账',
					id: 2
				}, {
					name: '出账',
					id: 1
				}],
				dataInfo: {},
				dataList: [],
				imgData: {},
				recharge_switch:0
			};
		},
		onLoad(option) {
			if (option.tabCurrent) {
				this.current = 1
				this.tabCurrent = option.tabCurrent
			}
			

		},
		onShow() {
			this.balance_detail()
			this.income_list()
		},
		methods: {
			balance_detail() {
				balance_detail().then((res) => {
					const data=res.data
					this.dataInfo = res.data
					this.recharge_switch=Number(data.recharge_switch) 
				}).catch((err) => {

				})
			},
			changeTab(e) {
				this.tabCurrent = e
				this.income_list()
			},
			income_list() {
				const params = {
					id: this.tabList[this.tabCurrent].id
				}
				income_list(params).then((res) => {
					this.dataList = res.data.list
				})
			},

			goDetail(item) {
				// if (item.link_id == 0) return
				if (item.jump_order) {
					this.$util.JumpPath(`/pages/goods/order_details/index?order_id=${item.jump_order_id}`)
				} else {
					if(item.type.includes('system')) return
					if (this.tabCurrent == 0) {
						this.$util.JumpPath(`/pages/new_page/detail/balanceInDetail?id=${item.id}`)
					} else {
						this.$util.JumpPath(`/pages/new_page/detail/balanceOutDetail?id=${item.id}`)
					}
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		background: #F6F6F6;

		.top_box {
			padding-top: 40rpx;
			// height: 485rpx;
			background: #F6F6F6;

			.tab_box {
				height: 100rpx;
				padding: 0 150rpx;
				background: #fff;

				.tab_item {
					font-size: 34rpx;
					height: 100%;
					color: #383838;
					border-bottom: 6rpx solid transparent;

				}

				.active {
					color: #643400;
					border-bottom: 6rpx solid #643400;
				}

			}

			.user-box {
				width: 680rpx;
				border-radius: 12rpx;
				overflow: hidden;
				padding: 50rpx 30rpx 70rpx;
				position: relative;
				z-index: 2;
				margin: 0 auto 20rpx;

				.user_bg {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 0;
					width: 100%;
					height: 100%;
					overflow: hidden;
					background: linear-gradient(to bottom, #B8BEC3, #D7DCDF);

					image {
						width: 100%;
						min-height: 100%;
					}
				}

				.top-box {
					color: #000000;
					font-size: 28rpx;
					line-height: 50rpx;
					position: relative;

					.text-d {

						.name {
							margin-bottom: 10rpx;
						}

						.num {
							font-size: 60rpx;
							font-weight: 700;
						}
					}

					.btn_box {
						font-size: 28rpx;
						color: #383838;

						.btn {
							width: 127rpx;
							height: 59rpx;
							line-height: 59rpx;
							text-align: center;
							border-radius: 8rpx;
							background: #fff;
							margin-left: 23rpx;
						}
					}
				}

				.value-box {
					position: relative;
					width: 100%;
					text-align: center;
					line-height: 60rpx;
					margin-top: 30rpx;
					color: #000;

					.li {
						display: inline-block;
						vertical-align: top;
						text-align: center;

						.value {
							font-size: 35rpx;
							font-weight: 700;
						}

						.name {
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.list-box {
			padding-top: 30rpx;
			width: 720rpx;
			overflow: hidden;
			position: relative;
			z-index: 2;
			margin: 0 auto;
			padding-bottom: 40rpx;

			.list {
				width: 100%;
				margin-bottom: 16rpx;
				background: white;
				border-radius: 12rpx;
				padding: 20rpx 30rpx;
				color: #808080;
				font-size: 28rpx;
				line-height: 50rpx;
				position: relative;

				.arrow_right {
					.iconfont {
						font-size: 22rpx;
						font-weight: 700;
					}
				}

				.title {
					color: #3B3A39;
					font-weight: 700;

					.status_box {
						height: 37rpx;
						line-height: 37rpx;
						border-radius: 4rpx;
						background: #EDEDED;
						padding: 0 18rpx;
						font-weight: normal;
						color: #808080;
						margin-left: 17rpx;
					}
				}

				.body {
					.left {
						padding-right: 200rpx;
					}

					.pirce {
						color: #D43030;
						font-weight: 700;
						position: absolute;
						right: 30rpx;
						top: 80rpx;
					}
				}

			}
		}


	}
</style>